<template>
    <div class="paymentDetail" id="paymentDetail">
        <ul class="profess-List">
            <li class="profess-List-title">套餐名称：
                <input type="text" v-model="title.professName" readonly> 学年制：
                <select v-model="title.years" id="">
                    <option value="3">专科</option>
                    <option value="4" selected>本科</option>
                </select> 套餐总价：
                <input type="text" v-model="title.price" readonly>
            </li>
            <li class="profess-List-box">
                <ul style="color:black;">
                    <li>名称</li>
                    <li>单价（元）</li>
                    <li>操作</li>
                </ul>
                <ul v-for="(item,index) in professList" :key="index">
                    <li style="color:black;">{{item.charge_name}}</li>
                    <li style="color:black;">{{item.money}}</li>
                    <li @click="editDetail(item.charge_item_id)">
                        <a href="#" style="color:black;">编辑</a>
                    </li>
                </ul>
            </li>
        </ul>

        <el-dialog :title="formEditTitle" :visible.sync="dialogFormVisible" class="popup-models">
            <el-form :model="form" :disabled="formEditDisabled">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="form.charge_name" auto-complete="off" readonly></el-input>
                </el-form-item>
                <el-form-item label="单价" :label-width="formLabelWidth">
                    <el-input v-model="form.money" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDetail">保存</el-button>
                <el-button type="danger" @click="deleteDetail">删除</el-button>
                <el-button @click="dialogFormVisible = false">返回</el-button>
            </div>
        </el-dialog>
        <div class="btn-box" style="margin:25px auto; display: flex;justify-content: center;">
            <el-button @click="goCencal">返回</el-button>
        </div>
    </div>
</template>

<script>
    import apis from '../apis/apis';
    export default {
        name: 'paymentDetail',
        data() {
            return {
                formEditTitle: '修改信息',
                formEditDisabled: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                professList: [],
                form: {},
                title: {
                    professName: '套餐名称',
                    years: '1',
                    price: '15000'
                },
                template: ''
            }
        },
        beforeMount() {
            var self = this;
            self.getSessionData();
        },
        mounted() {
            this.getPayment();
        },
        methods: {
            /* 数组求和 */
            sumArr(arr) {
                return arr.reduce(function(prev, curr, idx, arr) {
                    return prev + curr;
                })
            },
            getSessionData() {
                var self = this;
                self.template = JSON.parse(sessionStorage.getItem('template'));
            },
            /* 返回上一级 */
            goCencal() {
                this.$router.back(-1);
            },
            /* 编辑套餐-套餐列表 */
            getPayment() {
                var self = this;
                var params = {
                    id: self.template.id
                }
                apis.contApi.getProfessName(params).then((res) => {
                    var result = res.data.data;
                    self.professList = result.detail;
                    self.title.professName = result.template[0].name;
                    self.title.years = result.template[0].professionales_id;
                    self.title.price = self.sumArr(result.detail.map(v => v.money));
                }).catch((error) => {
                    console.error(error);
                });
            },
            /* 编辑套餐-编辑弹窗 */
            editDetail(id) {
                var self = this;
                self.dialogFormVisible = true;
                self.form = self.professList.filter(v => v.charge_item_id == id)[0];
            },
            /* 编辑套餐-保存 */
            submitDetail() {
                var self = this;
                var params = {
                    templates_id: self.form.templates_id,
                    charging_items_id: self.form.charge_item_id,
                    money: self.form.money
                }
                apis.contApi.editProfessData(params).then((res) => {
                    if(res.data.code == 0) {
                        self.dialogFormVisible = false;
                        self.getPayment();
                    }
                }).catch((error) => {
                    console.error(error);
                })
            },
            /* 编辑套餐-删除套餐 */
            deleteDetail() {
                var self = this;
                var params = {
                    templates_id: self.form.templates_id,
                    charging_items_id: self.form.charge_item_id,
                    money: self.form.money.toString()
                }
                if(!self.form.money) {
                    self.$message('仅可删除金额非空项！');
                    return false;
                }
                apis.contApi.deleteProfessData(params).then((res) => {
                    if(res.data.code == 0) {
                        self.dialogFormVisible = false;
                        self.$message(res.data.msg);
                        self.getPayment();
                    }
                }).catch((error) => {
                    console.error(error);
                })
            }
        }
    }
</script>
<style scoped>
    img {
        vertical-align: middle;
    }

    input,
    select {
        width: 160px;
        height: 30px;
        border: none;
        border-bottom: 1px solid #999;
        border-radius: 3px;
        text-indent: 9px;
        outline: none;
        margin-right: 20px;
    }

    .profess-List {
        width: 100%;
        text-align: center;
        color: #666;
        font-size: 14px;
        border: 1px solid #5e87b0;
        border-radius: 5px;
    }

    .profess-List li {
        min-height: 50px;
        line-height: 50px;
    }

    .profess-List .profess-List-title {
        display: flex;
        align-items: center;
        padding: 0 15px;
        background-color: #5E87B0;
        color: #FFFFFF;
        border: 1px solid #5e87b0;
    }

    .profess-List .profess-List-box {
        width: 100%;
        /* display: flex; */
    }

    .profess-List .profess-List-box>ul {
        flex: 1;
        display: flex;
        /* flex-direction: column; */
    }

    .profess-List .profess-List-box>ul>li {
        border-left: 0.5px solid #e5e5e5;
        border-bottom: 0.5px solid #e5e5e5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: auto;
        flex:1;
    }
</style>
